<template>
  <div class="sport-year">
    <div
      class="sport-year-title"
      @click="showYears()"
    >
      {{ currentSeason.name }}
    </div>
    <van-icon
      class="sport-year-icon"
      name="arrow-down"
    />
    <div
      v-for="(item, index) in scorelist"
      :key="index"
    >
      <score :scoreinfo="item"></score>
    </div>
    <div class="sport-year-select">
      <van-popup
        position="bottom"
        round
        :show="show"
        @close="onClose()"
      >
        <van-picker
          class="sport-year-select-picker"
          show-toolbar
          title="选择年份"
          :columns="yearsList"
          @cancel="onClose"
          @confirm="getYear"
        />
      </van-popup>
    </div>

  </div>
</template>

<script>
import Score from '@/components/teamdata/score'
import { getSeasonMatchsApi } from '@/api'
export default {
  components: {
    Score
  },
  props: {
    seasons: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      currentSeason: null,
      show: false,
      yearsList: [],
      columns: [
        {
          id: 1,
          value: '2021赛季'
        },
        {
          id: 2,
          value: '2020赛季'
        },
        {
          id: 30,
          value: '2019赛季'
        },
        {
          id: 4,
          value: '2018赛季'
        },
        {
          id: 5,
          value: '2017赛季'
        },
        {
          id: 6,
          value: '2016赛季'
        },
        {
          id: 7,
          value: '2015赛季'
        },
        {
          id: 8,
          value: '2014赛季'
        },
        {
          id: 9,
          value: '2013赛季'
        },
        {
          id: 10,
          value: '2012赛季'
        }
      ],
      scorelist: [
        {
          id: 1,
          home: '重庆两江竞技',
          homeicon: '/static/icons/teamlogo/chongqing.png',
          homescore: 2,
          guest: '山东泰山',
          guesticon: '/static/icons/teamlogo/taishan.png',
          guestscore: 0,
          datetime: '04-20 20:00',
          group: 1
        },
        {
          id: 2,
          home: '山东泰山',
          homeicon: '/static/icons/teamlogo/taishan.png',
          homescore: 1,
          guest: '广州',
          guesticon: '/static/icons/teamlogo/guangzhou.png',
          guestscore: 0,
          datetime: '04-27 15:35',
          group: 2
        },
        {
          id: 3,
          home: '河南嵩山龙门',
          homeicon: '/static/icons/teamlogo/henan.png',
          homescore: 1,
          guest: '山东泰山',
          guesticon: '/static/icons/teamlogo/taishan.png',
          guestscore: 1,
          datetime: '05-02 18:00',
          group: 3
        },
        {
          id: 4,
          home: '山东泰山',
          homeicon: '/static/icons/teamlogo/taishan.png',
          homescore: 2,
          guest: '青岛',
          guesticon: '/static/icons/teamlogo/qingdao.png',
          guestscore: 0,
          datetime: '05-08 18:00',
          group: 4
        },
        {
          id: 5,
          home: '深圳',
          homeicon: '/static/icons/teamlogo/shenzhen.png',
          homescore: 2,
          guest: '山东泰山',
          guesticon: '/static/icons/teamlogo/taishan.png',
          guestscore: 2,
          datetime: '05-14 18:00',
          group: 5
        }
      ]
    }
  },
  onShow () {

  },
  onLoad () {
    if (this.seasons.length > 0) {
      this.seasons.map(item => {
        if (item.current) {
          this.currentSeason = item
        }
        this.yearsList.push(item.year + '赛季')
      })
    }
  },
  watch: {
    currentSeason (v) {
      this.onLoadMatch(v.id)
    }
  },
  methods: {
    showYears () {
      this.show = true
    },
    onClose () {
      this.show = false
    },
    getYear (event) {
      console.log(event)
      this.show = false
      const value = event.target.value
      this.currentSeason = this.seasons.find(item => {
        return item.year + '赛季' === value
      })
    },
    onLoadMatch (seasonId) {
      getSeasonMatchsApi({
        season_id: seasonId
      }).then(res => {
        this.scorelist = res
      })
    }
  }
}
</script>

<style lang="less">
.sport-year {
  &-title {
    float: left;
    padding: 10px;
  }
  &-icon {
    padding: 10px 0px;
  }
  &-select {
    clear: both;
  }
}
</style>
